<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
		<link rel="stylesheet" type="text/css" href="huiyuan.css" />
	</head>

	<body>

		<!--遮罩层-->
		<div id="zhe">
			<table cellpadding="0" cellspacing="0" align="center">
				<tr>
					<td>姓名:</td>
					<td>
						<input type="text" name="name" id="name" value="" />
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男" checked="checked" />男
						<input type="radio" name="sex" value="女" />女
					</td>
				</tr>
				<tr>
					<td>卡号:</td>
					<td>
						<input type="number" name="kahao" id="kahao" />
					</td>
				</tr>
				<tr>
					<td>会员级别:</td>
					<td>
						<select name="huiyuan">
							<option value="初级">初级</option>
							<option value="高级">高级</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>电话号码:</td>
					<td>
						<input type="number" name="tel" id="tel" />
					</td>
				</tr>
				<tr>
					<td>
						出生年月:
					</td>
					<td>
						<input type="text" name="bir" id="year" />年
						<input type="text" name="bir" id="yue" />月
						<input type="text" name="bir" id="day" />日
					</td>
				</tr>
				<tr>
					<td>
						消费金额:
					</td>
					<td>
						<input type="number" name="qian" id="qian" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" name="quxiao" id="quxiao" value="取消" />
						<input type="button" name="queren" id="queren" value="确认" />
					</td>
				</tr>
			</table>
		</div>

		<table align="center" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<th>
					<input type="checkbox" name="check" id="check" />
				</th>
				<th>
					姓名
				</th>
				<th>
					性别
				</th>
				<th>
					卡号
				</th>
				<th>
					会员级别
				</th>
				<th>
					电话号码
				</th>
				<th>
					出生年月
				</th>
				<th>
					消费金额
				</th>
				<th></th>
				<th></th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkbox" />
				</td>
				<td>
					张三
				</td>
				<td>
					男
				</td>
				<td>
					66666666666666666
				</td>
				<td>
					高级
				</td>
				<td>
					110000000
				</td>
				<td>
					1998-13-35
				</td>
				<td>
					66666666666
				</td>
				<td>
					<a href="#">
						<img src="images/add.jpg" />
					</a>
				</td>
				<td>
					<a href="#">
						<img src="images/del.jpg" name="del" />
					</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkbox" />
				</td>
				<td>
					张三
				</td>
				<td>
					男
				</td>
				<td>
					66666666666666666
				</td>
				<td>
					高级
				</td>
				<td>
					110000000
				</td>
				<td>
					1998-13-35
				</td>
				<td>
					66666666666
				</td>
				<td>
					<a href="#">
						<img src="images/add.jpg" />
					</a>
				</td>
				<td>
					<a href="#">
						<img src="images/del.jpg" name="del" />
					</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkbox" />
				</td>
				<td>
					张三
				</td>
				<td>
					男
				</td>
				<td>
					66666666666666666
				</td>
				<td>
					高级
				</td>
				<td>
					110000000
				</td>
				<td>
					1998-13-35
				</td>
				<td>
					66666666666
				</td>
				<td>
					<a href="#">
						<img src="images/add.jpg" />
					</a>
				</td>
				<td>
					<a href="#">
						<img src="images/del.jpg" name="del" />
					</a>
				</td>
			</tr>
			<tr>
				<td colspan="10">
					<a href="#" name="add">
						&emsp;&emsp;&emsp;&emsp;新增
					</a>
					<a href="#">
						<img src="../dingpeigouwu/images/taobao_del.jpg" name="clear" />
					</a>
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		yang();
		//换色
		function yang() {
			$("body>table tr:not(:last):odd").css("background-color", "lightyellow");
			$("body>table tr:not(:last):even").css("background-color", "white");
			$("body>table tr").find("td:eq(4)").css("color", "orange");
		}

		//删除
		$("img[name='del']").live("click", function() {
			$(this).parent().parent().parent().remove();
			yang();
		});

		//新增
		$("a[name='add']").click(function() {
			$("#zhe").show();

		})

		//提交
		$("#queren").click(function() {
			var $name = $("#name").val();
			var $sex = $("input[name=sex]:checked").val();
			var $kahao = $("#kahao").val();
			var $huiyuan = $("select[name='huiyuan']").val();
			var $tel = $("#tel").val();
			var $bir = $("#year").val() + "-" + $("#yue").val() + "-" + $("#day").val();
			var $qian = $("#qian").val();

			var $new = $("<tr>" +
				"<td>" +
				"<input type='checkbox' name='checkbox' />" +
				"</td>" +
				"<td>" +
				$name +
				"</td>" +
				"<td>" +
				$sex +
				"</td>" +
				"<td>" +
				$kahao +
				"</td>" +
				"<td>" +
				$huiyuan +
				"</td>" +
				"<td>" +
				$tel +
				"</td>" +
				"<td>" +
				$bir +
				"</td>" +
				"<td>" +
				$qian +
				"</td>" +
				"<td>" +
				"<a href='#'>" +
				"<img src='images/add.jpg'/>" +
				"</a>" +
				"</td>" +
				"<td>" +
				"<a href='#'>" +
				"<img src='images/del.jpg' name='del'/>" +
				"</a>" +
				"</td>" +
				"</tr>")
			var $tr = $("table tr:last").prev();
			$tr.after($new)
			$("#zhe").hide();
			$("#name").val("");
			$("input[value='男']").attr("checked","checked");
			$("#kahao").val("");
			$("select[name='huiyuan']").val("初级");
			$("#tel").val("");
			$("#year").val("")
			$("#yue").val("")
			$("#day").val("");
			$("#qian").val("");
			yang();
			//新增反选判断
			fan();
		})

		//取消
		$("#quxiao").click(function() {
			$("#zhe").hide();
			$("#name").val("");
			$("input[value='男']").attr("checked","checked");
			$("#kahao").val("");
			$("select[name='huiyuan']").val("初级");
			$("#tel").val("");
			$("#year").val("")
			$("#yue").val("")
			$("#day").val("");
			$("#qian").val("");
		})

		//全选      prop 返回true  or  false
		$("#check").live("click", function() {
			chec = $(this).prop("checked");
			$("input[name='checkbox']").each(function() {
				$(this).attr("checked", chec);
			})
		})
		//反全选
		$("input[name='checkbox']").live("click",function(){
			fan();
		});
		//反选
		function fan(){
			var $con = 0;
			var $th = $("input[name='checkbox']");
			$th.each(function() {
				if($(this).prop("checked")) {
					$con++;
				}
			})

			if($con == $th.length) {
				$("#check").attr("checked", true);
			} else {
				$("#check").attr("checked", false);
			}
		}

		//删除所选
		$("img[name='clear']").click(function() {
			$("input[name='checkbox']").each(function() {
				if($(this).prop("checked")) {
					$(this).parent().parent().remove();
				}
			})
			yang();
		})
	</script>

</html>